<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>资源管理</el-breadcrumb-item>
      <el-breadcrumb-item>资源列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索筛选区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input v-model="resourceInfo.keyword" placeholder="请输入内容" class="input-with-select" clearable @clear="getResourceList" @change="getResourceList">
            <el-button slot="append" icon="el-icon-search" @click="getResourceList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="periodValue" placeholder="可选择学段" clearable @clear="getResourceList" @change="getResourceList">
            <el-option
              v-for="item in periodList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="subjectValue" placeholder="可选择学科" clearable @clear="getResourceList" @change="getResourceList">
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table
        :data="resourceList"
        :border="true"
        stripe
        style="width: 100%"
        @sort-change="sortChange"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="resourceName" label="资源名称" width="180"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180" sortable="custom"></el-table-column>
        <el-table-column prop="resourceType" label="资源类型">
          <template slot-scope="scope">
            {{ $getLabel(resourceTypeList,scope.row.resourceType,'value','label') }}
          </template>
        </el-table-column>
        <el-table-column prop="period" label="学段">
          <template slot-scope="scope">
            {{ $getLabel(periodList,scope.row.period,'value','label') }}
          </template>
        </el-table-column>
        <el-table-column prop="subject" label="学科">
          <template slot-scope="scope">
            {{ $getLabel(subjectList,scope.row.subject,'value','label') }}
          </template>
        </el-table-column>
        <el-table-column prop="isFeatured" label="是否为精选">
          <template slot-scope="scope">
            {{ $getLabel(isFeaturedList,scope.row.isFeatured,'value','label') }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <!-- 使用作用域插槽 -->
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-tooltip :enterable="false" effect="dark" content="编辑" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip :enterable="false" effect="dark" content="删除" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        :current-page="resourceInfo.page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="resourceInfo.perPage"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
    <!-- 修改资源对话框 -->
    <el-dialog
      :visible.sync="editDialogVisible"
      title="编辑资源信息"
      width="50%">
      <el-form :model="editResourceForm" label-width="80px">
        <el-form-item label="资源名称">
          <el-input v-model="editResourceForm.resourceName"></el-input>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-date-picker
            v-model="editResourceForm.updateTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            class="full-width"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="资源类型" >
          <el-select v-model="editResourceForm.resourceType" placeholder="请选择资源类型" class="full-width">
            <el-option v-for="item in resourceTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学段">
          <el-select v-model="editResourceForm.period" placeholder="请选择学段" class="full-width">
            <el-option v-for="item in periodList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学科" >
          <el-select v-model="editResourceForm.subject" placeholder="请选择学科" class="full-width">
            <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否精选" >
          <el-switch
            v-model="editResourceForm.isFeatured"
            active-color="#5b7099"
            inactive-color="#d0d8e8"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="enitInfoSend()">修 改</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { getResource, EditResource } from '@/api/admin'

export default {
  data() {
    return {
    // 获取用户列表对象
      resourceInfo: {
        // 搜索关键字
        keyword: '',
        // 当前的页数
        page: 1,
        // 每页显示的条数
        perPage: 5,
        // 排序的方式 0为默认 2为升序 3为降序
        sort: 0,
        period: '',
        subject: ''
      },
      // 学段选择框绑定的值
      periodValue: '',
      // 学科选择框绑定的值
      subjectValue: '',
      // 资源列表
      resourceList: [],
      // 编辑对话框表单
      editResourceForm: {
        resourceName: '',
        updateTime: '',
        resourceType: '',
        period: '',
        subject: '',
        // 是否为精选资源
        isFeatured: ''
      },
      editResourceID: '',
      // 总数据条数
      total: 0,
      // 控制编辑资源对话框隐藏还是展示
      editDialogVisible: false,
      // 资源类型表
      resourceTypeList: [
        {
          value: 1,
          label: '媒体素材'
        },
        {
          value: 2,
          label: '试题'
        },
        {
          value: 3,
          label: '试卷'
        },
        {
          value: 4,
          label: '课件'
        },
        {
          value: 5,
          label: '文献资料'
        },
        {
          value: 6,
          label: '教学案例'
        },
        {
          value: 7,
          label: '常见问题解答'
        },
        {
          value: 8,
          label: '资源目录索引'
        },
        {
          value: 9,
          label: '网络课程'
        }

      ],
      // 学段表
      periodList: [
        {
          value: '2',
          label: '小学'
        },
        {
          value: '3',
          label: '初中'
        },
        {
          value: '4',
          label: '高中'
        }
      ],
      // 学科表
      subjectList: [
        {
          value: 11,
          label: '品德与生活（社会）'
        },
        {
          value: 12,
          label: '思想品德（政治）'
        },
        {
          value: 13,
          label: '语文'
        },
        {
          value: 14,
          label: '数学'
        },
        {
          value: 15,
          label: '科学'
        },
        {
          value: 16,
          label: '物理'
        },
        {
          value: 17,
          label: '化学'
        },
        {
          value: 18,
          label: '生物'
        },
        {
          value: 19,
          label: '历史与社会'
        },
        {
          value: 20,
          label: '初中地理'
        },
        {
          value: 21,
          label: '初中历史'
        },
        {
          value: 22,
          label: '体育与健康'
        },
        {
          value: 23,
          label: '艺术'
        },
        {
          value: 24,
          label: '音乐'
        },
        {
          value: 25,
          label: '美术'
        },
        {
          value: 26,
          label: '信息技术'
        },
        {
          value: 27,
          label: '通用技术'
        },
        {
          value: 40,
          label: '外语'
        },
        {
          value: 41,
          label: '英语'
        },
        {
          value: 42,
          label: '日语'
        },
        {
          value: 43,
          label: '俄语'
        },
        {
          value: 49,
          label: '其他外国语'
        },
        {
          value: 60,
          label: '综合实践活动'
        },
        {
          value: 61,
          label: '信息技术'
        },
        {
          value: 62,
          label: '劳动与技术'
        }

      ],
      // 是否精选表
      isFeaturedList: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 0,
          label: '否'
        }
      ]
    }
  },
  computed: {
    // 转换是否精选的返回值类型
    revertTypeToInt: {
      get() {
        if (this.editResourceForm.isFeatured === true) {
          return 1
        } else if (this.editResourceForm.isFeatured === false) {
          return 0
        }
        // return this.editResourceForm.isFeatured === true ? 1 : 0
      },
      set(newValue) {
        this.editResourceForm.isFeatured = newValue
      }

    }
  },
  created() {
    this.getResourceList()
  },
  methods: {
    // 获取资源列表
    async getResourceList() {
      // periodValue类型值转换
      if (this.periodValue === '') {
        this.resourceInfo.period = 0
      } else {
        this.resourceInfo.period = this.periodValue
      }
      // subjectValue类型值转换
      if (this.subjectValue === '') {
        this.resourceInfo.subject = 0
      } else {
        this.resourceInfo.subject = this.subjectValue
      }
      const { data: res } = await getResource(
        this.resourceInfo
      )
      this.resourceList = res.data.resources
      this.total = res.data.total
    },
    // 监听每页显示几个事件
    handleSizeChange(newSize) {
      this.resourceInfo.perPage = newSize
      this.getResourceList()
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.resourceInfo.page = newPage
      this.getResourceList()
    },
    // 显示编辑资源的对话框
    showEditDialog(item) {
      this.editDialogVisible = true
      this.editResourceID = item.id
      this.editResourceForm = item
      if (item.isFeatured === 1) {
        this.editResourceForm.isFeatured = true
      } else if (item.isFeatured === 0) {
        this.editResourceForm.isFeatured = false
      }
    },
    // 更改按钮
    enitInfoSend() {
      this.editDialogVisible = false
      EditResource(this.editResourceID, {
        resourceName: this.editResourceForm.resourceName,
        updateTime: this.editResourceForm.updateTime,
        resourceType: this.editResourceForm.resourceType,
        period: this.editResourceForm.period,
        subject: this.editResourceForm.subject,
        isFeatured: this.revertTypeToInt
      }).then((response) => {
        if (response.data.code !== 200) {
          this.$message.warning(response.data.message)
        }
      })
    },
    // 按时间排序
    sortChange(column) {
      if (column.order == 'ascending') {
        this.resourceInfo.sort = 2
        this.getResourceList()
      } else if (column.order == 'descending') {
        this.resourceInfo.sort = 3
        this.getResourceList()
      }
    }
  }

}
</script>

<style scoped>
.full-width {
  width: 100%;
}
.el-switch{
  margin-left: 10px;
}
</style>
